<template>
  <el-dialog
    title="选择课程"
    :visible="selectCourseModal"
    size="large"
    :before-close="hideModalAlert"
  >
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div
          class="widget-body am-fr"
          style="padding: 0px ;"
        >
          <!--searching condition-->
          <div class="am-u-sm-12 am-form ">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.areaTeamId"
                  :options="areaTeams"
                >
                  <option value="">区域</option>
                </select2>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.busTeamId"
                  :options="busTeams"
                >
                  <option value="">业务组</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.productId"
                  :options="products"
                >
                  <option value="">请选择产品</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.gradeId"
                  :options="grades"
                >
                  <option value="">年级</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.subjectId"
                  :options="subjects"
                >
                  <option value="">学科</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2
                  v-model="query.periodId"
                  :options="periods"
                >
                  <option value="">期数</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <input
                  type="text"
                  name="courseName"
                  v-model="query.courseName"
                  placeholder="请输入课程名称"
                  @focusin="fixFocus"
                />
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-u-end">
              <div class="am-form-group">
                <button
                  type="button"
                  class="am-btn am-btn-default am-btn-success "
                  @click="search"
                ><span class="am-icon-search"></span>查询
                </button>
                <button
                  type="button"
                  class="am-btn am-btn-default am-btn-success "
                  @click="addClass"
                >新建
                </button>
              </div>
            </div>

          </div>

          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              stripe
              height="400"
              style="min-width: 100%"
            >
              <el-table-column
                fixed
                prop="courseName"
                label="课程名"
                min-width="200"
              >
              </el-table-column>
              <el-table-column
                label="课程类型"
                prop="courseTypeName"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="gradeName"
                label="年级"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="subjectName"
                label="科目"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="lectureAmount"
                label="讲数"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="level"
                label="班型"
                min-width="120"
              >
                <template scope="scope">
                  <div>{{scope.row.level | getRegLevelVal}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="areaTeamName"
                label="区域"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="busTeamName"
                label="业务组"
                min-width="100"
              >
              </el-table-column>
              <!--<el-table-column
                label="状态"
                min-width="100">
                <template scope="scope">
                  {{scope.row.status == 0 ? '未启用':'已启用'}}
                  </template>
              </el-table-column>-->
              <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="120"
              >
                <template scope="scope">
                  <el-button
                    size="small"
                    @click.native="$emit('ok',scope.row);selectCourseModal = false"
                  >确认</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="am-u-lg-12 am-cf">
            <div class="am-fr">
              <pagination
                v-bind:total="total"
                v-bind:pageNo="pageNo"
                v-bind:pageSize="pageSize"
                @paging="loadTableData"
              />
            </div>
          </div>

        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import io from '../../../lib/io'

import Pagination from '../../base/Pagination'

export default {
  data: function() {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNo: 1,
      query: {
        areaTeamId: '',
        busTeamId: '',
        productId: '',
        periodId: '',
        courseName: ''
      },
      products: [],
      periods: [],
      selectCourseModal: false
    }
  },
  components: {
    Pagination
  },
  created() {
    this.loadPeriodData()
  },
  props: {
    queryProps: {
      type: Object,
      default: {}
    }
  },
  watch: {
    queryProps: function() {
      if (this.queryProps.propsData) {
        this.query = {
          ...this.queryProps.propsData
        }
      }
    },
    'query.areaTeamId': function() {
      this.query.busTeamId = ''
      this.query.productId = ''
      this.loadProductData()
      this.loadPeriodData()
    }
  },
  computed: {
    areaTeams: function() {
      var options = (this.$root.config.areaTeams || []).map(function(item) {
        return { value: item.areaTeamId, text: item.name }
      })
      return options
    },
    //响应式，（this.query.areaTeamId ）相关依赖改变重新求值，
    busTeams: function() {
      var options = (this.query.areaTeamId
        ? this.$root.config.groupBusTeams[this.query.areaTeamId] || []
        : []
      ).map(function(item) {
        return { value: item.busTeamId, text: item.name }
      })
      this.query.busTeamId = ''
      return options
    },
    //计算缓存，性能开销比较大的的计算属性
    grades: function() {
      return this.$root.config.grades.map(function(item) {
        return { value: item.gradeId, text: item.gradeName }
      })
    },
    subjects: function() {
      return this.$root.config.subjects.map(function(item) {
        return { value: item.subjectId, text: item.subjectName }
      })
    }
  },
  methods: {
    hideModalAlert(){
      this.selectCourseModal = false
    },
    // fix input无法输入的bug
    fixFocus(e) {
      e.stopPropagation()
      e.preventDefault()
    },
    addClass() {
      this.hideModalAlert()
      this.$router.push('/main/course/course/add')
    },
    loadPeriodData: function() {
      io.post(
        io.apiAdminPeriodListForAreaTeam,
        {
          areaTeamId: this.query.areaTeamId
        },
        ret => {
          if (ret.success) {
            this.periods = ret.data.map(item => {
              return { value: item.periodId, text: item.periodName }
            })
          } else {
            this.$alert(ret.desc)
          }
        }
      )
    },
    search: function() {
      this.loadTableData(1)
    },
    loadTableData: function(pageNo) {
      var _this = this
      _this.pageNo = pageNo || _this.pageNo || 1
      io.post(
        io.apiAdminCourseTemplateUseList,
        $.extend(
          {
            pageNo: _this.pageNo,
            pageSize: _this.pageSize
          },
          _this.query
        ),
        function(ret) {
          if (ret.success) {
            _this.total = ret.data.total
            _this.tableData = ret.data.list
          } else {
            _this.$alert(ret.desc)
          }
        }
      )
    },
    loadProductData: function() {
      var _this = this
      io.post(
        io.apiAdminBaseProductListForAreaTeam,
        {
          areaTeamId: this.query.areaTeamId
        },
        function(ret) {
          if (ret.success) {
            _this.products = ret.data.map(function(item) {
              return { value: item.productId, text: item.name }
            })
          } else {
            _this.$alert(ret.desc)
          }
        }
      )
    },
    show: function() {
      this.loadTableData(this.pageNo)
      this.loadProductData()
      this.$refs.win.show({
        width: 1000,
        height: 600
      })
    }
  }
}
</script>
<style lang="less">
</style>

